<template>
  <div class="manu">
      <div class="manu-category">
        <ul>
<!--          <li v-for="(item,index) in cateList" :key="index">-->
<!--            <h3>{{ item.name }}</h3>-->
<!--            <p v-for="(value,index) in item.children" :key="index" style="margin:13px 0px 13px 16px;" >-->
<!--              <a href="">{{ value.name }}</a><br>-->

<!--&lt;!&ndash;              <a href="" v-for="(subItem) in subjectList" :key="subItem.name" @click.prevent="goodsList(value.id,subItem.id)">{{ subItem.name }}&nbsp;&nbsp;&nbsp;&nbsp;</a>&ndash;&gt;-->
<!--            </p>-->
<!--            <hr>-->
<!--          </li>-->
          <li v-for="(item,index) in cateList" :key="index" >
            <h3 style="margin-top: 9px;margin-bottom: 2px;">{{ item.name }}</h3>
            <hr style="margin-bottom: 2px;">
            <span v-for="(value,index) in item.children.slice(0,3)"  :key="index" style="margin: 8px 13px 13px 0px;">
                <el-button
                    style="width: 5em;height: 2.4em; color: #0a0a0a;
 background-color: white;
border-color: #fff;"
                    type="success"
                    @click="showBooks(value.id)">
                {{ value.name }}
              </el-button>

            </span>
<!--            <a href="" v-for="(subItem,index) in subjectList" :key="index">{{ subItem.name }}&nbsp;&nbsp;&nbsp;&nbsp;</a>-->
            <SmallSub :secCateId="item.id" ref="child1"/>
          </li>

        </ul>
      </div>
  </div>
</template>

<script>
import SmallSub from "@/views/home/components/index_components/smallSub/SmallSub";
export default {
  name: "BookCategory",
  data(){
    return{

      curIndex:null,
      secCateId:null,
      cateList: [],
      // defaultProps: {
      //   children: 'children',
      //   name: 'name'
      // },
      subjectList:[]
    }
  },
  methods:{
    // defSub(cateId,curIndex){
    //   this.curIndex = curIndex
    //   this.secCateId = cateId
    //
    //   console.log(this.$refs)
    //   this.$refs.child1[this.curIndex].showSub(cateId);
    // },
    showBooks(cateId){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.$router.push({path:'/paybook',query:{cateId:cateId}})
      }, 1000);



    },
    goodsList(cateId,subId){
      console.log(cateId,subId)
    },

  },
  created() {
    // this.getRequest('/p/pms/bookCategory/list').then((resp)=>{
    //   console.log(resp)
    //   this.cateList = resp.data.list
    // })
    // this.getRequest('/p/pms/subject/listAll').then((resp)=>{
    //   this.subjectList = resp.data
    // })


    this.getRequest('/p/pms/bookCategory/list').then((resp)=>{
      console.log(resp)
      this.cateList = resp.data.list.slice(0,3)
    })
    this.getRequest('/p/pms/subject/listAll').then((resp)=>{
      console.log(resp)
      this.subjectList = resp.data.list
    })
    // this.defSub()
  },
  components:{
    SmallSub
  }
}
</script>

<style scoped>
  *{list-style: none;padding:0;margin: 0; text-decoration: none;}
  .manu{
    margin: 4px auto;
    /*width: 119em;*/
  }
  .manu-category{
    width: 326px;
    height: 408px;
    /*border: solid 1px red;*/
    margin-bottom: 2em;
  }
  .manu-category ul{
    width: 100%;
  }
  .manu-category ul li{
    /*height: 10.3em;*/
  }
  .manu-category ul li p{
    margin-bottom: 0em;
  }
</style>